<template>
	<view class="header">
		<view class="top" v-if="statistics">
			<image src="../../static/team-icon.png" class="team-icon" mode=""></image>
			<view class="top-content">
				<image :src="statistics.avatar || '/static/avatar-default.png'" class="avatar" mode=""></image>
				<text class="name">{{statistics.nickName}}</text>
				<view class="top-footer" @click="showParent">
					<text class="label">上级：</text>
					<text class="value">{{statistics.parentNickName || '去填写'}}</text>
				</view>
			</view>
		</view>
		<view class="footer" v-if="statistics">
			<view class="footer-item">
				<text class="label">累计收益</text>
				<text class="value">{{statistics.totalAmount}}U</text>
			</view>
			<view class="footer-item">
				<text class="label">今日收益</text>
				<text class="value">{{statistics.todayAmount}}U</text>
			</view>
			<view class="footer-item">
				<text class="label">本月收益</text>
				<text class="value">{{statistics.monthAmount}}U</text>
			</view>
		</view>
	</view>
	<view class="list">
		<view class="item">
			<view class="">
				<image src="../../static/service-black.png" mode=""></image>
				<text>我的邀请码</text>
			</view>
			<view class="right" v-if="userData">
				
				<view class="" v-if="userData.investAmount>0" @click="copy(userData.userNo)">
					<text>{{userData.userNo}}</text>
					<image src="../../static/copy.png" mode=""></image>
				</view>
				<text class="np" v-else>购买产品后启用邀请码</text>
			</view>
		</view>
		<view class="item" @click="bindPlatform">
			<view class="">
				<image src="../../static/zx.png" mode=""></image>
				<text>团队成员</text>
			</view>
			<image src="../../static/rihgt-999.png" mode=""></image>
		</view>

	</view>
	<view class="model" v-if="modelState">
		<view class="content">
			<view class="top">
				<text>上级编号</text>
				<image src="../../static/close.png" mode="" @click="modelState = false"></image>
			</view>
			<input type="text" v-model="inviteCode" placeholder="请输入上级编号" />
			<button class="btn" @click="confirm">确定</button>
		</view>
	</view>

</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		teamStatistics,
		user,
		teamSetParent
	} from '@/util/api.js'
	import {
		onShow
	} from '@dcloudio/uni-app'
	const modelState = ref(false)
	const userData = ref()
	const inviteCode = ref()
	const bindPlatform = ()=>{
		uni.navigateTo({
			url:"/pages/teamInfo/teamInfo"
		})
	}
	const statistics = ref()
	const getData = async() =>{
		const result = await teamStatistics()
		statistics.value  = result.data
	}
	const showParent = ()=>{
		modelState.value = true
	}
	const copy = (str)=>{
		uni.setClipboardData({
			data: String(str),
			success: function() {
				console.log('success');
			}
		});
	}
	// 获取当前登录用户信息
	const getUser = async() =>{
		const result = await user()
		
		userData.value = result.data
	}
	const confirm = async ()=>{
		if(!inviteCode.value){
			uni.showModal({
				title:"提示",
				content:"请输入上级编号",
				showCancel:false
			})
			return false
		}
		const result = await teamSetParent(inviteCode.value)
		modelState.value = false
		getData()
	}
	onShow(()=>{
		getUser()
		getData()
	})
	// 03ZMG
	// 04IFC
</script>

<style lang="scss">
	.model {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9;
		background: rgba(0, 0, 0, .5);

		.content {
			width: 673rpx;
			height: 406rpx;
			background: #FFFFFF;
			border-radius: 23rpx;
			margin: 400rpx auto 0;

			.top {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 44rpx 38rpx 38rpx;

				text {
					color: #333;
					font-size: 30rpx;
				}

				image {
					display: block;
					width: 38rpx;
					height: 38rpx;
				}
			}

			input {
				display: block;
				width: 596rpx;
				height: 100rpx;
				background: #F6F6FF;
				border-radius: 71rpx;
				margin: 0 auto;
				text-indent: 77rpx;
			}

			.btn {
				width: 596rpx;
				height: 100rpx;
				background: #0265FF;
				box-shadow: 0px 12rpx 38rpx 2rpx rgba(0, 4, 61, 0.12);
				border-radius: 71rpx;
				margin: 38rpx auto 0;
				color: #fff;
				line-height: 100rpx;
				font-weight: 800;
				font-size: 38rpx;
			}
		}
	}

	.list {
		margin: 30rpx auto;
		width: 597rpx;

		background: #FFFFFF;
		padding: 20rpx 38rpx;
		box-shadow: 0px 15rpx 38rpx 0px rgba(49, 54, 70, 0.06);
		border-radius: 23rpx;

		.item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 100rpx;

			>image {
				width: 23rpx;
				height: 23rpx;
				display: block;
			}

			>view {
				display: flex;
				align-items: center;

				image {
					display: block;
					width: 38rpx;
					height: 38rpx;
					margin-right: 20rpx;
				}

				text {
					display: block;
					color: #313646;
					font-size: 28rpx;
				}
			}

			.right {
				display: flex;
				align-items: center;
				justify-content: space-between;
				view{
					display: flex;
					align-items: center;
					justify-content: space-between;
				}

				text {
					// margin-right: 20rpx;
					text-align: right;
				}
			}

			.np {
				color: #999999;
				font-size: 30rpx;
				text-align: right;
				display: block;
			}
		}
	}

	.header {
		width: 673rpx;
		overflow: hidden;
		background: #FFFFFF;
		box-shadow: 0px 15rpx 38rpx 2rpx rgba(49, 54, 70, 0.05);
		border-radius: 23rpx;
		margin: 38rpx;
		padding-bottom: 38rpx;

		.footer {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 48rpx;
			margin-top: 38rpx;

			.footer-item {
				.label {
					display: block;
					color: #333;
					font-size: 28rpx;
					margin-bottom: 18rpx;
					text-align: center;
				}

				.value {
					display: block;
					color: #FF984D;
					font-weight: 800;
					font-size: 40rpx;
					text-align: center;
				}
			}
		}

		.top {
			width: 650rpx;
			height: 296rpx;
			background: #587AFC;
			box-shadow: 0px 15rpx 38rpx 2rpx rgba(49, 54, 70, 0.05);
			border-radius: 12rpx;
			margin: 12rpx;
			position: relative;

			.team-icon {
				display: block;
				width: 650rpx;
				height: 296rpx;
			}

			.top-content {
				position: absolute;
				top: 0;
				left: 0;
				width: 650rpx;

				.avatar {
					display: block;
					width: 112rpx;
					height: 112rpx;
					margin: 38rpx auto 20rpx;
				}

				.name {
					color: #fff;
					font-size: 28rpx;
					font-weight: 800;
					display: block;
					text-align: center;
				}

				.top-footer {
					display: flex;
					align-items: center;
					justify-content: center;
					margin-top: 20rpx;

					.label {
						color: #fff;
						font-size: 20rpx;
					}

					.value {
						padding: 0 15rpx;
						height: 31rpx;
						background: #C5D1FF;
						border-radius: 13rpx;
						display: block;
						color: #0265FF;
						font-size: 20rpx;
						text-align: center;
						line-height: 31rpx;
					}
				}
			}
		}

	}

	page {
		background: #F6F7F9;
	}
</style>